<!DOCTYPE html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap-theme.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap3-editable/css/bootstrap-editable.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/css/mycss.css'/>">

    <title>TPO</title>
    <style>
        .couCoverImage{
            width: 50px;
            height: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TPO Admin</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="<@spring.url '/admin/category/list'/>">分类</a></li>
                    <li><a href="<@spring.url '/admin/article/list'/>">文章</a></li>
                    <li class="active"><a href="javascript:void(0);">词汇</a></li>
                    <li><a href="<@spring.url '/admin/user'/>">用户</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container-fluid">
        <div>
            <h3>${article.nameCn!} (${article.nameEn!})</h3>
            <p>${article.articleEn!}</p>
        </div>
        <div id="toolbar">
            <a type="button" class="btn btn-primary " href="javascript:void(0);" onclick="add(${article.id});"> 添加词汇 </a>
        </div>
        <table class="table table-inverse table-hover"
               id="dataTable"
               data-toggle="table"
               data-url="/tpo/admin/article/${article.id}/vocabulary/list/data"
               data-height="790"
               data-side-pagination="client"
               data-sort-order="desc"
               data-sort-name="id">
        </table>
    </div>

    <script src="<@spring.url '/admin/js/jquery-3.2.1.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrap.min.js'/>"></script>
    <script src="<@spring.url '/admin/js/popper.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table-zh-CN.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table-editable.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrap3-editable/js/bootstrap-editable.js'/>"></script>
    <script>
    var $table = $('#dataTable').bootstrapTable({
        //表格的列
        columns: [
            {
                field: 'id',//域值
                title: 'id',//内容
                visible: true,//false表示不显示
                sortable: true//启用排序
            },
            {
                field: 'word',//域值
                title: 'word',//内容
                editable:true,
                visible: true,//false表示不显示
                sortable: true//启用排序
            },
            {
                field: 'phonetic',//域值
                title: '音标',//内容
                editable:true,
                visible: true,//false表示不显示
                sortable: true//启用排序
            },
//            {
//                field: 'audio_url',//域值
//                title: '发音',//内容
//                editable:true,
//                visible: true,//false表示不显示
//                sortable: false,//启用排序
//                formatter : function (value, row, index) {
//                    if(!value){
//                        return "";
//                    }
//                    return value;
//                }
//            },
            {
                field: 'partOfSpeech',//域值
                title: '词性和翻译',//内容
                editable:true,
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    if(!value){
                        return "";
                    }
                    return value;
                }
            },
            {
                field: 'order',//域值
                title: '排序',//内容
                editable:true,
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    if(!value){
                        return "";
                    }
                    return value;
                }
            },
            {
                title: '操作',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var id =  row["id"];;
                    return '<button type="button" class="btn btn-danger" onclick="del('+id+')" >删除</button>';
                }
            }
        ],
        onEditableSave: function (field, row, oldValue, $el) {
            console.log(JSON.stringify(field));
            console.log(JSON.stringify(row));
            console.log(JSON.stringify(oldValue));
            $.ajax({
                type: "post",
                url: "/tpo/admin/vocabulary/editShortcutSave",
                data: row,
                dataType: 'JSON',
                success: function (data, status) {
                    if (data.status == 200) {
                        $table.bootstrapTable('refresh');
                    }else{
                        alert(data.message);
                    }
                },
                error: function () {
                    alert('编辑失败');
                }
            });
        }
    });

    function del(id) {
        if(confirm("警告：确定要删除吗?（删除后数据不可恢复） id="+id)){
            $.ajax({
                type: "post",
                url: "/tpo/admin/vocabulary/delete/"+id,
                success: function (data, status) {
                    if (data.status == 200) {
                        $table.bootstrapTable('refresh');
                    }else{
                        alert(data.message);
                    }
                },
                error: function () {
                    alert('失败???!!!');
                }
            });
        }
    }

    function add(articleId) {
        $.ajax({
            type: "post",
            url: "/tpo/admin/article/"+articleId+"/vocabulary/add",
            success: function (data, status) {
                if (data.status == 200) {
                    $table.bootstrapTable('refresh');
                }else{
                    alert(data.message);
                }
            },
            error: function () {
                alert('失败???!!!');
            }
        });
    }
</script>
</body>
</html>